<template>
  <div class="loginbgc">
    <div class="resLogin">
      <el-form-item>
        <el-input
          v-model="userinfo.username"
          style="width: 240px"
          placeholder="请输入账号"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="userinfo.Loginres"
          style="width: 240px"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>

      <p></p>
      <el-button type="primary" @click="Loginres1">登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { LoginApi } from "@/api/Loginres";
import { ElMessage } from "element-plus";
import {getCurrentRouters} from "@/grants/routers"

const userinfo = reactive({
  username: "",
  Loginres: "",
});

const $router = useRouter();

const Loginres1 = async () => {
  // console.log(userinfo);
  // 发送请求：
  let res = await LoginApi({
    adminname: userinfo.username,
    password: userinfo.Loginres,
  });
  if (res.data.code == "200") {
    ElMessage({
      message: "登录成功",
      type: "success",
      duration: 1000,
    });
    // 1、存用户名
    localStorage.setItem("username", userinfo.username);
    // 2、存token
    localStorage.setItem("token", res.data.data.token);
    // 3.存管理员的菜单信息
    localStorage.setItem("checkedkeys",res.data.data.checkedkeys)
    // 1,2,2-1,2-1-C,2-1-R,2-1-U,2-1-D,2-2,3,3-1,3-2,4,4-1,4-2,4-3,4-4,4-5,5,6,6-1,6-2

    // 动态路由添加
    getCurrentRouters()

    $router.push("/Home/home");
  } else {
    ElMessage.error("密码错误");
  }
};
</script>

<style scoped>
.loginbgc {
  background-image: url("../../assets/login.png");
  height: 100%;
  /* 背景图垂直、水平均居中 */
  background-position: center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  overflow: hidden;
}

.resLogin {
  width: 400px;
  min-height: 60px;
  border: 1px solid black;
  background-color: antiquewhite;
  margin: 100px auto;
  text-align: center;
}

.el-input {
  margin: 10px auto;
}
</style>